<template>
  <div class="table-box">
    <ProTable :columns="columns" ref="proRef" :pagination="false" :requestApi="getPropertyList">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)">新增状态</el-button>
        <el-button type="danger" @click="deleteApi(scope.selectedListIds)" :disabled="scope.selectedListIds.length === 0"
          >批量删除</el-button
        >
      </template>
      <template #preview="{ row }">
        <div v-show="row.name !== ''">
          <span class="px-5px py-2px" :style="{ backgroundColor: row.backColor, color: row.textColor }">{{ row.name }}</span>
        </div>
      </template>
      <template #opera="{ row }">
        <el-button link :icon="EditPen" type="primary" @click="opera(row)">编辑</el-button>
        <el-button link :icon="Delete" type="danger" @click="deleteApi([row.id])">删除</el-button>
      </template>
    </ProTable>
    <sellDrawer ref="sellRef"></sellDrawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import sellDrawer from "../components/sellDrawer.vue";
import { createPropertyStatus, editPropertyStatus, getPropertyList, deletePro } from "@/api/modules/property";
import { ref } from "vue";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";

const sellRef = ref<InstanceType<typeof sellDrawer> | null>();
const proRef = ref<InstanceType<typeof ProTable> | null>();

const deleteApi = async (ids: any) => {
  await useHandleData(deletePro, { ids }, "删除所选内容");
  proRef.value?.getTableList();
};

const columns: ColumnProps[] = [
  { type: "index", label: "#" },
  { prop: "name", label: "物业类型名称" },
  { prop: "backColor", label: "背景颜色" },
  { prop: "textColor", label: "字体颜色" },
  { prop: "statusCode", label: "状态码" },
  { prop: "preview", label: "预览" },
  { prop: "opera", label: "操作" }
];

const opera = (row: any) => {
  const params: any = {
    row: null,
    api: null,
    getTable: proRef.value?.getTableList
  };
  if (!row) {
    params.row = { name: "", backColor: "#EFC250", textColor: "#000", statusCode: 1 };
    params.api = createPropertyStatus;
    sellRef.value?.acceptParams(params);
  } else {
    params.row = row;
    params.api = editPropertyStatus;
    sellRef.value?.acceptParams(params);
  }
};
</script>

<style></style>
